<template>
  <transition name="el-zoom-in-top">
    <el-aside
      :class="{ 'mb-nav-open':mbNavIsOpen }"
      class="side-bar"
      width="250px">
      <div class="sider-header">
        <img
          class="logo"
          src="../../assets/img/logo.png">
        <span class="el-dropdown-link choise-item font-bold">管理后台</span>
      </div>
      <efun-menu :menu-list="menuList"/>
    </el-aside>
  </transition>
</template>

<script>
import EfunMenu from './EfunMenu.vue'
import { mapMutations, mapState } from 'vuex'

export default {
  components: {
    EfunMenu
  },
  data () {
    return {
      menuList: []
    }
  },
  computed: {
    ...mapState({
      mbNavIsOpen: state => state.common.mbNavIsOpen
    })
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.menuList = JSON.parse('[' +
        '{"systemId":6,"id":6,"sort":6,"type":"menu","parentId":0,"url":"/technique/distribute","name":"分发系统","childMenus":[' +
        '{"systemId":6,"id":601,"sort":1,"type":"menu","parentId":6,"url":"/technique/distribute/server","name":"邮件服务器"}]},' +
        '{"systemId":6,"id":1,"sort":1,"type":"menu","parentId":0,"url":"/account","name":"账号","childMenus":[' +
        '{"systemId":6,"id":101,"sort":1,"type":"menu","parentId":1,"url":"/","name":"首页"},' +
        '{"systemId":6,"id":102,"sort":2,"type":"menu","parentId":1,"url":"/i18n","name":"国际化"}]},' +
        '{"systemId":6,"id":2,"sort":2,"type":"menu","parentId":0,"url":"/pay","name":"储值"},' +
        '{"systemId":6,"id":3,"sort":3,"type":"menu","parentId":0,"url":"/platform","name":"平台"},' +
        '{"systemId":6,"id":4,"sort":4,"type":"menu","parentId":0,"url":"/activity","name":"活动"},' +
        '{"systemId":6,"id":5,"sort":5,"type":"menu","parentId":0,"url":"/sdk","name":"移动"}' +
        ']')
      this.menuList.forEach((json, index) => {
        if (index === 0) {
          json.show = true
        } else {
          json.show = false
        }
      })
    },
    ...mapMutations(['common/toggleMbNav'])
  }
}
</script>
